<template>
	<div class="header" :class="active?'actives':''">
		<div class="left">
			<img :src="active?activeImg:Img" alt="" class="logo" @click="gohome">

			<!-- @click="GoToIndex" -->
		</div>
		<transition name="el-zoom-in-center">
			<div v-show="showSearch" class="center">
				<el-select v-model="select" placeholder="宝贝" class="serch-select" size="small" @change="SelectChange">
					<el-option label="店铺" value="1" />
					<el-option label="宝贝" value="2" />
				</el-select>
				<el-input v-model="input1" class="serch-input" placeholder="输入你的关键字" size="small"
					@keyup.native.13="Search">
					<!-- @change="InputChange" -->
					<!-- @input="InputInput" -->
					<el-button slot="suffix" icon="el-icon-search" circle @click="Search" />
				</el-input>
			</div>
		</transition>
		<div class="right" :style="{filter:active?'opacity(0.5)':'none'}">
			<div class="iconGroup">
				<div v-if="!showSearch" class="name-box" :style="{filter:active?'invert(1)':'none'}" @click="search">
					<img src="../assets/newPage/search.png" alt="">
					<span>搜索</span>
				</div>

				<div v-else class="name-box" :style="{filter:active?'invert(1)':'none'}" @click="search">
					<i class="el-icon-close" style="color: #ffffff;font-weight: bold;font-size: 1.2rem;" />
					<span>取消</span>
				</div>
				<div class="name-box" :style="{filter:active?'invert(1)':'none'}" @mouseenter="showLogin = true"
					@mouseleave="showLogin = false">
					<img src="../assets/newPage/yonghu.png" alt="" @click="person">
					<span @click="person">{{ user.cUserName||'登录/注册' }}</span>
					<div v-if="user.cUserName&&showLogin" class="over">
						<p @click="person">
							个人中心
						</p>
						<p @click="loginOut">
							退出
						</p>
					</div>
				</div>
				<div class="name-box" :style="{filter:active?'invert(1)':'none'}" @click="goShoppingCart">
					<img src="../assets/newPage/gouwu.png" alt="">
					<span>购物车</span>
				</div>
				<div class="name-box" :style="{filter:active?'invert(1)':'none'}">
					<img src="../assets/newPage/more.png" alt="">
				</div>
			</div>
		</div>
	</div>
</template>
<!-- <script type="text/javascript" src=''></script> -->
<script>
	import activeImg from '@/assets/img/logo.png'
	import Img from '@/assets/img/logo@2x.png'
	export default {
		name: "",
		components: {},
		data() {
			return {
				searchContent: "",
				showSearch: false,
				falgs: false,
				activeIndex: "1",
				indexPaht: "",
				classify: [{
					name: "首页",
					id: "1",
					path: "/",
				}, ],
				select: "2", // 搜索店铺/商品
				input1: "", // 搜索内容
				active: true,
				activeImg: activeImg,
				Img: Img,
				user: {
					cUserName: ''
				},
				showLogin: false
			};
		},
		watch: {
			$route: function() {
				this.indexPaht = this.$route.query.id;
			},
			searchContent: function(val) {
				if (val != "") {
					this.$router.push({
						path: "/fruit",
						query: {
							userId: val,
						},
					});
				}
			},
		},
		mounted() {
			this.getData();
		},
		methods: {
			showBg() {
				this.active = true
			},
			hideBg() {
				this.active = false
			},
			getData() {
				// if(localStorage.getItem('token')){
				// 	this.user = JSON.parse(localStorage.getItem("userInfo"))
				// }

				setTimeout(() => {

					if (localStorage.getItem('token')) {
						let data = {
							token: localStorage.getItem("token"),
							data: {}
						}
						this.$api.person.userInfo(data).then((res) => {
							// 执行某些操作
							if (res.code == 200) {

								this.user = res.data;

							}
						});
					} else {
						this.GetCsLogin()
					}
					// if (localStorage.getItem('token')) {
					// 	this.user = JSON.parse(localStorage.getItem("userInfo"))
					// }
				}, 1000)





			},
			GetQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if (r !== null) return unescape(r[2]);
				return null;
			},
			GetCsLogin() {
				console.log('111')
				let that = this
				let params = {
					code: that.GetQueryString("code"),
					redirect_uri: encodeURIComponent(window.location.href)
				};
				if (params.code) {
					instance.post('https://mallmgt.inja.com/api/user/getUserInfoByCode', params).then(
						function(res) {
							if (res.code == 1) {
								that.user.cUserName = res.data.user.username
								window.localStorage.setItem("token", res.data.token);
								window.localStorage.setItem("userInfo", JSON.stringify(res.data.user));

							}

						})
					.catch(function(error) {
						console.log(error);
					});

			}
		},
		changeitem(item) {
			this.activeIndex = item.id;
			sessionStorage.setItem('ChangeItemID', item.id)
			this.$router.push({
				path: "/cate",
				query: {
					id: item.id,
				},
			});
		},
		person() {
			if (localStorage.getItem("token")) {
				this.activeIndex = "";
				this.$router.push({
					path: "/person",
				});
			} else {
				// let url = encodeURIComponent(location.href.split('#')[0])
				let url = encodeURIComponent(window.location.href);
				window.location.href =
					"https://isso.inja.com/isso/oidc/authorize?scope=openid&response_type=code&client_id=qd.prod&state=qd.prod&redirect_uri=" +
					url;
			}

		},
		gohome() {
			window.location.href = "https://www.inja.com/"; // 正式
			// window.location.href = "http://newportalsit.ysyec.com/" // 测试
		},
		search() {
			this.showSearch = !this.showSearch
			// this.$router.push({
			// 	path: "/fruit",
			// });
		},
		goShoppingCart() {
			this.$router.push({
				path: "/cart",
			});
		},
		// 点击logo回首页
		GoToIndex() {
			this.$router.push({
				path: "/",
			})
		},
		SelectChange(SelectChange) {
			console.log('改变搜索的值', SelectChange)

		},
		Search() {
			this.$store.commit('setDemoValue', this.input1);
			console.log('搜索', this.select, this.input1)
			if (this.select == 1) {
				this.$router.push({
					path: "/shopPage",
					query: {
						select: this.select,
						input: this.input1,
						ShopID: '',
						times: (new Date()).getTime()
					},
				});
			} else {

				this.$router.push({
					path: "/Fruit",
					query: {
						select: this.select,
						input: this.input1,
						times: (new Date()).getTime()
					},
				});
			}

		},
		loginOut() {
			localStorage.clear()
			window.location.reload()
		}

	},
	};
</script>

<style scoped lang="scss">
	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 6.18rem;
		background: transparent;
		// background: rgba(0, 0, 0, 1);
		// opacity: 0.95;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10rem;
		z-index: 999;
		box-shadow: 0 2px 10px -1px rgba(0, 0, 0, .1);

		&.actives {
			background: #FFFFFF;
		}

		// .logo{
		//   width: 20rem;
		//   height: 2rem;
		// }
		.logo {
			cursor: pointer;
			width: 24.19rem;
		}

		.left {
			// width: 50%;
			width: 30%;
			height: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}

		.right {
			// flex: 1;
			height: 50%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #fff;

			.menu {
				// width: 43rem;
				width: 50rem;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.menu-item {
					cursor: pointer;
					// font-size: 0.88rem;
					font-size: 1.125rem;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #666666;
					// font-weight: bold;
					// color: rgba(255, 255, 255, 1);
					// border-bottom: 1px solid #000;
					padding: 0.44rem 0;

					&.active {
						// color: #08c19d;
						color: #000;
						font-weight: 600;
						// border-bottom: 1px solid #08c19d;
					}

					&:hover {
						// color: #08c19d;
						color: #000;
						font-weight: 600;
					}
				}
			}

			// .newWidth {
			// 	// width: 48rem !important;
			// }

			.searchInput {
				
				input {
					height: 2rem;
					line-height: 2;
					background: transparent;
					border-bottom: 0.06rem solid rgba(255, 255, 255, 0.6);
					width: 0;
					transition-duration: 0.5s;
					transition-property: all;
					transition-timing-function: ease;
					transition-delay: 0s;
					outline: none;
					color: #fff;
					

					&.focus {
						width: 48rem !important;
					}
				}
			}

			.iconGroup {
				// width: 20rem;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #000;
				font-weight: bold;
				margin-left: 2rem;

				.name-box {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-right: 3.13rem;
					cursor: pointer;
					position: relative;

					img {

						width: 1.1rem;
						margin-right: 0.6rem;
					}

					span {
						font-size: 1rem;
						font-family: SourceHanSansCN;
						font-weight: 500;
						color: #FFFFFF;
					}

					.over {
						position: absolute;
						top: 100%;
						left: 10%;
						padding-top: 10px;

						&::before {
							position: absolute;
							right: 16px;
							top: -8px;
							content: '';
							border-style: solid;
							border-width: 9px 7px;
							border-color: transparent transparent #333 transparent;
						}

						p {
							background: #333;
							display: flex;
							justify-content: center;
							align-items: center;
							color: #fff;
							font-size: 1.2rem;
							margin-bottom: 0.05rem;
							width: 7rem;
							height: 2rem;

						}
					}

					&:last-child {
						margin-right: 0;
					}

				}

				i {
					cursor: pointer;
					color: #000;
					font-weight: bold;
				}


			}
		}
	}

	.center {
		color: black;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 30%;

		.serch-select {
			width: 20%;
		}

		.serch-select ::v-deep .el-input__inner {
			border-radius: 0;
			background: transparent;
			border: none;
			border-bottom: 1px solid #333;
			color: #333;
			font-size: 0.875rem;
		}

		.serch-input ::v-deep .el-input__inner {
			border-radius: 0;
			background: transparent;
			border: none;
			color: #333;
			border-bottom: 1px solid #333;
			font-size: 0.875rem;
		}
	}

	.el-select-dropdown__item.selected {
		color: #08c19d;
	}

	.el-button.is-circle {
		background: none;
		border: none;
		color: #fff;
		padding: 0.6rem 0 0 0;
	}
</style>
<style>
	.el-input--small{
		font-size: 0.875rem;
	}
	.el-select .el-input.is-focus .el-input__inner{
		font-size: 0.875rem;
		border-bottom: 1px solid #333!important;
	}
</style>
